<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>

	<title>Panels and Containers (steel)</title>

	<link rel="stylesheet" href="../../../../dojo/dojo/resources/dojo.css">
	<link rel="stylesheet" href="../../../../dojo/dijit/tests/css/dijitTests.css">
	<style type="text/css">
	.widgetContainer {
		padding-top: 10px;
	}
	.testTitle {
		padding-bottom: 10px;
	}
	
	body {
		padding-top: 120px;
	}
	
	</style>

	<!-- required: a default dijit theme: -->
	<link id="themeStyles" rel="stylesheet" href="../../themes/steel/SteelBase.css">

	<!-- required: dojo.js -->
	<script type="text/javascript" src="../../../../dojo/dojo/dojo.js"
		djConfig="parseOnLoad: true, isDebug: true"></script>

	<!-- not needed, for testing alternate themes -->
	<script type="text/javascript" src="../../../../dojo/dijit/tests/_testCommon.js"></script>

	<script language="JavaScript" type="text/javascript">
		dojo.require("dijit.dijit"); // optimize: load dijit layer
		dojo.require("dijit.Dialog");
		dojo.require("dijit.form.Button");
		dojo.require("dijit.form.TextBox");
		dojo.require("dijit.form.DateTextBox");
		dojo.require("dijit.form.TimeTextBox");
		dojo.require("dijit.form.FilteringSelect");
		dojo.require("dijit.layout.BorderContainer");
		dojo.require("dijit.layout.ContentPane");
		dojo.require("dijit.layout.TabContainer");
		dojo.require("dijit.InlineEditBox");
		dojo.require("dijit.TooltipDialog");
		dojo.require("dijit.form.Select");
		dojo.require("dijit.layout.TabContainer");
		dojo.require("dijit.InlineEditBox");
		dojo.require("dijit.Menu");
		dojo.require("dijit.Tooltip");
		dojo.require("dojo.parser"); // scan page for widgets
		dojo.addOnLoad(function(){
		});

		function myHandler(id,newValue){
			console.debug("onChange for id = " + id + ", value: " + newValue);
		}
	</script>

</head>
<body class="steel">
<div class="widgetContainer">
	<h3 class="testDialog">Dijit Dialog Test</h3>
	<button dojoType="dijit.form.Button"  id="ABDlg1Btn" onclick="dijit.byId('ABDlg1').show()">Show Dialog With Action Buttons</button>
	<div dojoType="dijit.Dialog" id="ABDlg1" title="ActionBar Dialog 1" 
			onExecute="console.log('OK button pressed')"
			onCancel="console.log('Cancel button pressed')"
			aria-describedby="intro"
			execute="console.log('submitted w/args:\n' + dojo.toJson(arguments[0], true));">
		<div class="dijitDialogPaneContentArea">
			<div id="ABintro1" style="width:30em;">Introductory information spoken by screen reader if aria-describedby is
			added to the declaration of dialog above with value equal to the id of the container element for this text. This technique
			will work in Dojo 1.4. </div>
		</div>
		
		
		<div class="dijitDialogPaneActionBar">
			<button dojoType="dijit.form.Button" type="submit" id="ABdialog1button1">OK</button>
			<button dojoType="dijit.form.Button" type="button" onClick="dijit.byId('ABDlg1').onCancel();" 
					id="ABdialog1button2">Cancel</button>
		</div>
	</div>
</div>
<div class="widgetContainer">
	<h3 class="testTTDialog">Dijit TooltipDialog Test</h3>
	<div dojoType="dijit.form.DropDownButton" id="tooltipDlgButton">
		<span>Show Tooltip Dialog</span>
		<div dojoType="dijit.TooltipDialog" id="tooltipDlg" title="Enter Login information">
			<table>
				<tr>
					<td><label for="inline">InlineEditBox:</label></td>
					<td><div dojoType=dijit.InlineEditBox type="text" name="inline" id="inline">inline</div></td>
				</tr>
				<tr>
					<td><label for="text">TextBox:</label></td>
					<td><input dojoType=dijit.form.TextBox name="text" id="text"></td>
				</tr>
				<tr>
					<td><label for="date2">Date:</label></td>
					<td><input dojoType=dijit.form.DateTextBox name="date" id="date2"></td>
				</tr>
				<tr>
					<td><label for="time2">Time:</label></td>
					<td><input dojoType=dijit.form.TimeTextBox name="time" id="time2"></td>
				</tr>
				<tr>
					<td><label for="combo">FilteringSelect:</label></td>
					<td>
						<select dojoType=dijit.form.FilteringSelect name="combo" id="combo" hasDownArrow="true">
							<option value="cheese">cheese</option>
							<option value="pepperoni">pepperoni</option>
							<option value="sausage">sausage</option>
						</select>
					</td>
				</tr>
				<tr>
					<td><label for="select">Select:</label></td>
					<td>
						<select dojoType=dijit.form.Select name="select" id="select">
							<option value="olives">olives</option>
							<option value="peppers">peppers</option>
							<option value="tomatoes">tomatoes</option>
						</select>
					</td>
				</tr>
				<tr>
					<td colspan="2" align="center">
						<button dojoType=dijit.form.Button type="submit" name="submit" id="submit">Order</button>
					</td>
				</tr>
			</table>
			<div style="width: 300px;">Note: This tooltip dialog has a bunch of nested drop downs for testing keyboard and click handling</div>
		</div>
	</div> |
</div>
<div class="widgetContainer">
	<h3 class="testDialog">Dijit Tooltip Test</h3>
	<span dojoType="dijit.Tooltip" connectId="multi1,multi2" id="multi1_multi2_tooltip" style="display:none;">Same tooltip instance is being used for multiple target widgets/nodes.</span>
	<br>
	<a id="multi1" href="#bogus">multi1</a>
	<br>
	<br>
	<a id="multi2" href="#bogus">multi2</a>
	<br>
	<br>
	<button dojoType=dijit.form.Button type="submit" name="submit" id="four">Tooltip on Button</button>
	<span id="btnTt" dojoType="dijit.Tooltip" connectId="four" id="four_tooltip">
		Retailers may have lost $1 billion of crucial post-Christmas sales because of the blizzard that struck over the holiday weekend,<br> according to a report Wednesday. ShopperTrak, which records sales and customer traffic at more than 70,000 stores and malls, <br>estimates that shopper traffic on Dec. 26 was 11.2% below what it would have been if the blizzard hadn't hit.</p>
	</span>
</div>

</body>
</html>